<template>
    <div>
       <!-- 轮播图 -->
       <div class="page-swipe">
        <mt-swipe :auto="4000">
            <mt-swipe-item v-bind:class="{slide1:true}">1</mt-swipe-item>
            <mt-swipe-item v-bind:class="{slide2:true}">2</mt-swipe-item>
            <mt-swipe-item v-bind:class="{slide3:true}">3</mt-swipe-item>
        </mt-swipe>
       </div>
       
       <!-- 热门推荐 -->
       <div class="cell">
        <mt-cell title="热门推荐">
            <mt-cell style="color: green" to="#" is-link>更多</mt-cell>
        </mt-cell>
       </div>
    </div>
</template>

<script>
    export default {

    }
</script>
<style>
/*header*/
.header{
    background-color: white;
    font-size: 30px
}

/*轮播图*/
.page-swipe{
    width: 100%
}
.page-swipe .mint-swipe {
    height: 250px;
    color: #fff;
    font-size: 30px;
    text-align: center;
}
.page-swipe .mint-swipe-item {
    line-height: 200px;
}
.page-swipe .slide1 {
    background-color: cornflowerblue;
    color: #fff;
}
.page-swipe .slide2 {
    background-color: burlywood;
    color: #000;
}
.page-swipe .slide3 {
    background-color: palevioletred;
    color: #fff;
}
.page-swipe-desc {
    text-align: center;
    color: #666;
    margin-bottom: 5px;
}

.my-btn-box{
  margin-top:50px;
}

/*cell*/
.cell{
    margin-top: 0
}

/*video*/
.left{
    margin-left: 20px;
    margin-top: 50px;
    width:45%;
    display: inline-block; 
    border-radius: 15px; 
    position: relative;
    cursor: pointer;
}
.right{
    margin-left: 50px;
    margin-top: 50px;
    width:45%;
    display: inline-block; 
    border-radius: 15px; 
    position: relative;
    cursor: pointer;
}
</style>